<template>
  <div class="storeUser common-container">
    <div class="common-top">
      <span class="left">
        <el-form
          :inline="true"
          :model="formInline"
          size="small"
          class="demo-form-inline"
        >
          <el-form-item label="搜索">
            <el-input
              v-model="formInline.searchVal"
              placeholder="搜索"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <el-button type="primary" @click="toModify('add')">添加</el-button>
    </div>
    <div class="common-bot">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column prop="address" label="头像">
          <template slot-scope="scope">
            <el-avatar :size="'large'" :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="name" label="性别">
          <template slot-scope="scope">
            <span>{{ genderFormat[scope.row.gender] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="客户类型">
          <template slot-scope="scope">
            <span>{{ roleFormat[scope.row.role] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="province" label="省份">
          <template slot-scope="scope">
            <span>{{ formatCity(scope.row.province, "province") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="城市">
          <template slot-scope="scope">
            <span>{{ formatCity(scope.row.city, "city") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="enable" label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable"
              @change="modifyEnable(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="操作">
          <template slot-scope="scope">
            <span
              class="span-modify edit"
              @click.stop="doModify('recharge', scope.row)"
              >充值</span
            >
            <span
              class="span-modify edit"
              @click.stop="doModify('edit', scope.row)"
              >编辑</span
            >
            <span
              class="span-modify del"
              @click.stop="doModify('del', scope.row)"
              >删除</span
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :title="dialogType == 'auth' ? '权限设置' : '充值'"
      :visible.sync="showDialog"
      width="30%"
    >
      <el-form
        :model="rechargeForm"
        ref="rechargeForm"
        label-width="auto"
        class="demo-rechargeForm"
        v-if="dialogType == 'recharge'"
      >
        <el-form-item label="充值数额">
          <el-input v-model="rechargeForm.offset" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="充值类型">
          <el-select v-model="rechargeForm.wealthType" placeholder="请选择">
            <el-option
              v-for="item in wealthTypeOptions"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充值说明">
          <el-input
            v-model="rechargeForm.detail"
            maxlength="10"
            placeholder="请输入说明(10个字符以内)..."
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import ManaApi from "@/api/index";
import { CodeToText } from "element-china-area-data";

export default {
  name: "storeUser",
  data() {
    return {
      showDialog: false,
      dialogType: "recharge",
      formInline: {
        searchVal: "",
      },
      tableData: [],
      rechargeForm: {
        wealthType: "",
        offset: "",
        detail: "",
      },
      roleFormat: {
        boss: "老板",
        employee: "员工",
      },
      nowPage: 1,
      limit: 10,
      totalElement: 0,
      genderFormat: {
        male: "男",
        female: "女",
      },
      CodeToText,
      nowSelItem: null,
      wealthTypeOptions: [],
    };
  },
  watch: {
    "formInline.searchVal"(val) {
      this.getData(val);
    },
  },
  methods: {
    getConstant() {
      ManaApi.constant.all({}).then((res) => {
        this.wealthTypeOptions = res.data.WealthType;
      });
    },
    checkInfo() {
      if (String(this.rechargeForm.wealthType).trim() == "") {
        this.$message({
          type: "error",
          message: "请选择充值类型",
        });
        return false;
      }
      if (String(this.rechargeForm.detail).trim() == "") {
        this.$message({
          type: "error",
          message: "请输入说明（10）个字符以内",
        });
        return false;
      }
      return true;
    },
    submit() {
      if (this.dialogType == "auth") {
        this.$set(this.authForm, "targetId", this.nowSelItem.id);
        ManaApi.userMana.userAuth(this.authForm).then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.showDialog = false;
            this.getData();
          }
        });
      } else {
        if (!this.checkInfo()) {
          return;
        }
        ManaApi.storeUserMana
          .userRecharge({
            targetId: this.nowSelItem.id,
            offset:
              this.rechargeForm.wealthType == "money"
                ? this.$bigNumber(
                    "times",
                    Number(this.rechargeForm.offset),
                    100
                  )
                : this.rechargeForm.offset,
            wealthType: this.rechargeForm.wealthType,
            detail: this.rechargeForm.detail,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.showDialog = false;
              this.getData();
            }
          });
      }
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.nowPage = val;
      this.getData();
    },
    modifyEnable(item) {
      ManaApi.storeUserMana
        .enable({
          targetId: item.id,
          yes: item.enable ? true : false,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.getData();
          }
        });
    },
    doModify(type, item) {
      if (type == "edit") {
        this.$router.push({
          name: "storeUserModify",
          query: {
            type,
            id: item.id,
          },
        });
      } else if (type == "del") {
        this.$confirm("确认此操作?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          ManaApi.storeUserMana
            .del({
              targetIds: [item.id],
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.getData();
              }
            });
        });
      } else if (type == "recharge") {
        this.nowSelItem = item;
        this.showDialog = true;
        this.dialogType = "recharge";
      }
    },
    toModify(type) {
      this.$router.push({
        name: "storeUserModify",
        query: {
          type,
        },
      });
    },
    getData(keyword = "") {
      ManaApi.storeUserMana
        .userList({
          limit: this.limit,
          page: this.nowPage - 1,
          keyword,
        })
        .then((res) => {
          this.tableData = res.data;
          this.totalElement = res.total;
        });
    },
    formatCity(item, type) {
      if (!item) {
        return "---";
      }
      console.log(item);
      let info = JSON.parse(JSON.stringify(item));
      let addr = info.split(",");
      console.log(addr);
      console.log(CodeToText);
      if (type == "province") {
        return CodeToText[addr[0]];
      } else {
        return CodeToText[addr[1]];
      }
    },
  },
  async mounted() {
    await this.getConstant();
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.storeUser {
}
</style>